<template>
  <div style="padding:20px 20px 40px 20px">
    <el-card shadow="hover">
        <el-form inline>
            <el-form-item><el-button @click="add" type="warning" size="mini">新增</el-button></el-form-item>
        </el-form>
    </el-card>
    <el-table 
        v-loading="loading"
        :data="tableData"
        style="margin-top:20px;width: 100%;"
        border
        class="table"
        ref="multipleTable"
        header-cell-class-name="table-header">
        <el-table-column type="index" align="center" label="序号"></el-table-column>
        <el-table-column prop="type" align="center" label="类型名称"></el-table-column>
        <el-table-column prop="unitPrice" align="center" label="单价（元）"></el-table-column>
        <el-table-column prop="createTime" align="center" label="创建时间"></el-table-column>
        <el-table-column prop="content" align="center" label="备注"></el-table-column>
        <el-table-column align="center" label="操作">
            <template slot-scope="scope">
                <el-button @click="ed(scope.row)" type="text">编辑</el-button>
            </template>
        </el-table-column>
        </el-table>

        <el-dialog :title="title" :visible.sync="open" width="850px">
            <el-form :model="form" ref="form"  label-width="140px">
                <el-form-item label="类型名称:" prop="type">
                    <el-input style="width:200px" v-model="form.type"></el-input>
                </el-form-item>
                <el-form-item label="单价(每瓦/（元）):" prop="unitPrice">
                    <el-input-number :min="1" controls-position="right" v-model="form.unitPrice"></el-input-number>
                </el-form-item>
                <el-form-item label="备注:" prop="content">
                    <el-input type="textarea" placeholder="请输入内容" v-model="form.content" maxlength="100" show-word-limit ></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button  size="mini" @click="open = false">取 消</el-button>
                <el-button type="primary" size="mini" @click="submitForm">确 定</el-button>
            </div>
            <div v-if="title == '编辑'">
                <el-table
                border
                :data="table"
                style="width: 100%">
                    <el-table-column
                        prop="userName"
                        align="center"
                        label="操作者"
                        width="180">
                    </el-table-column>
                    <el-table-column
                        prop="createTime"
                        align="center"
                        label="操作时间"
                        >
                    </el-table-column>
                    <el-table-column
                        prop="content"
                        align="center"
                        label="内容"
                        >
                    </el-table-column>
                </el-table>
            </div>
        </el-dialog>
  </div>
</template>

<script>
import { getList , addSure , edSure , edList} from "@/api/systemSettings/money.js"; // 权限判断函数

export default {
    data () {
        return {
            loading:false,
            tableData:[],
            table:[],
            title:'',
            open:false,
            params:{
                pageNum: 1,
                pageSize: 10
            },
            total:0,
            form:{
                unitPrice:'',
                type:'',
                content:'',
            }
        }
    },
    created() {
        this.getList00()
    },
    methods: {
        add() {
            this.open = true;
            this.form = {
                unitPrice:'',
                type:'',
                content:'',
            }
            this.title = '新增'
        },
        ed(row) {
            edList(row.id).then(res => {
                if(res.code == 200){
                    this.table = res.rows
                    this.form = JSON.parse(JSON.stringify(row))
                    this.title = '编辑'
                    this.open = true
                }
            })
        },
        submitForm() {
            if(this.title == '新增'){
                addSure(this.form).then(res => {
                    if(res.code == 200){
                        this.open = false
                        this.getList00()
                    }
                })
            }else if(this.title == '编辑'){
                edSure(this.form).then(res => {
                    if(res.code == 200){
                        this.open = false
                        this.getList00()
                    }
                })
            }
        },
        getList00(){
            getList(this.params).then(res => {
                if(res.code == 200){
                    this.tableData = res.rows
                    this.total = res.total
                }
            })
        }
    }
}
</script>

<style>

</style>